<template>
  <!--内容...-->
  <div :class="{ active: !brandFold }" class="card">
    <div class="content">
      <div class="contentUp">
        <div class="name">
          <span><i></i>{{ cardList.agentName }}</span>
        </div>
      </div>
      <div class="cardBtns">
        <span @click="cardListTracking(cardList)">跟进</span>
        <span @click="cardListTo(cardList)">查看</span>
      </div>
      <div class="contentDown"  v-if='isInvestment'>
        <div class="contentDownList">
          <div>
            <span>意向客户：{{ cardList.agentName }}</span>
          </div>
          <div>
            <span>联系人：{{ cardList.contacts }}</span>
          </div>
          <div>
            <span>联系电话：{{ cardList.contactPhone }}</span>
          </div>
          <div>
            <span>客户来源：{{ cardList.customerSource }}</span>
          </div>
          <div>
            <span>客户进展：{{ cardList.customerProgress }}</span>
          </div>
          <div>
            <span>客户类型：{{ cardList.customerType }}</span>
          </div>
          <div>
            <span>客户备注：{{ cardList.contaccustomerRemarktPhone }}</span>
          </div>
        </div>
      </div>
      <div class="contentDown" v-if='isSchool'>
        <div class="contentDownList">
          <div>
            <span>学校名称：{{ cardList.name }}</span>
          </div>
          <div>
            <span>学校人数：{{ cardList.peopleNum }}</span>
          </div>
          <div>
            <span>学校负责人：{{ cardList.contact }}</span>
          </div>
          
          <div>
            <span>手机：{{ cardList.phone }}</span>
          </div>
          <div>
            <span>三方手机：{{ cardList.thirdPhone }}</span>
          </div>
          <div>
            <span>三方姓名：{{ cardList.thirdName }}</span>
          </div>
          <div>
            <span>三方合同签署时间：{{ cardList.thirdContractSignedDate }}</span>
          </div>
          <div>
            <span>三方合同到期时间：{{ cardList.thirdContractEndDate }}</span>
          </div>
          <div>
            <span>意向程度：{{ cardList.typeName }}</span>
          </div>
          <div>
            <span>地区：{{ cardList.typeName }}</span>
          </div>
          
        </div>
      </div>
      <!-- <div
        class="info"
        v-if="Object.keys(cardList).length > 6"
        v-on:click="changeFoldState"
      >
        <span>{{ brandFold ? "点击查看详情" : "收起" }}</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
export default {
  name: "Card",
  components: {},
  props: {
    cardList: {}
  },
  data() {
    return {
      instance: "",
      isRouterAlive: true,
      brandFold: true,
      customerType:this.$route.name,
      isSchool:false,
      isInvestment:false,
      isStudent:false
    };
  },
  methods: {
    // 查看
    cardListTo(val) {
      this.$emit("cardListTo", val);
    },
    // 跟进
    cardListTracking(params){
      this.$emit("cardListTracking", params);
    },
    // 展开收起
    changeFoldState() {
      this.brandFold = !this.brandFold;
    },
    getdata() {
      if(this.customerType=='学校客户移动端'){
        this.isSchool=true
      }
      if(this.customerType=='代理商移动端'||this.customerType=='代理商成单'){
        this.isInvestment=true
      }
      console.log(this.customerType)
    }
  },
  mounted() {
    this.getdata()
  }
};
</script>

<style scoped lang="scss">
.card {
  position: relative;
  margin: 0 auto;
  width: 9.2rem; //670px 计算公式 设计稿的px/75
  height: 8.1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
  margin-bottom: 0.32rem;
  overflow: hidden;
  margin-left: 0.1rem;
  .content {
    font-size: 0.34rem;
    .contentUp {
      display: flex;
      flex-direction: row;
      margin-top: 0.48rem;
      justify-content: space-between;
      .name {
        margin-left: 0.4rem;
        font-size: 0.4rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 47px;
        span{
          i{
            display: inline-block;
            background: url(../images/person.png);
            width: 0.36rem;
            height: 0.41rem;
            background-size: cover;
            margin-right: 10px;
          }
        }
      }
    }
    .cardBtns {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0 1rem 0.8em 1rem;
      span {
        display: block;
        width: 3rem;
        height: 0.8rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.4rem;
        border: 1px solid rgba(44, 130, 255, 1);
        line-height: 0.8rem;
        text-align: center;
        font-size: 0.4rem;
        color: rgba(44, 130, 255, 1);
      }
    }
    .contentDown {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-left: 0.4rem;
      .contentDownList {
        display: block;
        margin-bottom: 0.26rem;
        text-align: left;
      }
    }
    .info {
      text-align: center;
      position: absolute;
      top: 85%;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 0.32rem;
      padding-top: 0.5rem;
      border-top: 1px solid #f0f0f0;
      padding-bottom: 0.47rem;
      background: #fff;
    }
  }
  
}
.active {
  height: auto;
  // overflow: scroll;
}
</style>
